<template>
    <div v-if="init">
        <BForm ref='formRef' :label-col='{span : 5}' :fields='formFields'></BForm>
    </div>
</template>

<script lang="ts" setup>
    import { listApi } from '@/api/project/Category';
    import { uploadApi } from '@/api/project/Project'
    import { recursionFn } from '@/utils';
    import { nextTick, ref } from 'vue';


    const init = ref(false)

    const formRef = ref()
    const category = ref<any[]>([])

    const formFields:FormField[] = [
        {label : 'id', name : 'id', hidden : true},
        {label : '名称', name : 'name', type : 'text', maxlength : 30, required:true},
        {label : '分类', name : 'parentId', type : 'treeSelect', required : true, defaultValue : '', options : () => category.value, labelField : 'name', valueField : 'id', childrenField : 'children'},
        {label : '封面图', name : 'cover', type : 'upload', uploadApi : uploadApi, uploadCount : 1, defaultValue : []},
        {label : '轮播图', name : 'images', type : 'upload', uploadApi : uploadApi, uploadCount : 5, defaultValue : []},
        {label : '链接', name : 'link', type : 'text', maxlength : 50},
        {label : '启用', name : 'enable', type : 'switch', defaultValue : true},
    ]




    listApi().then(res => {
        if(res.data.length > 0) {
            category.value = recursionFn(res.data, Math.min(...res.data.map(row => row.parentId)), 'id', 'parentId', 'children')
        }
        

        nextTick(() => {
            init.value = true
        })
    })

</script>